<div class="radio">

    <div class="radio-body">

        <div class="list">
            <ul>
                <li>
                    <a href="#">
                        <span></span>
                        情感
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        音乐推荐
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        有声书
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        脱口秀
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        创作翻唱
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        电音
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        知识
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        二次元
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        明星专区
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        生活
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        亲子
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        新闻资讯
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        广播剧
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        故事
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        人文历史
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        娱乐
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        相声曲艺
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span></span>
                        其它
                    </a>
                </li>


            </ul>
        </div>

        <div class="radio-t">
            <div>
                <div class="radio-top">
                    <a href="#">推荐节目</a>
                    <a href="#">更多&gt;</a>
                </div>
                <ul>

                    <li>
                        <a href="#"><img src="radio-imgs/rl01.png" alt=""><i></i></a>
                        <div>
                            <p>对话黄绮珊：跨越六年再续感动 致敬青春</p>
                            <p>非常音乐</p>
                        </div>
                        <a href="#">音乐推荐</a>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rl02.png" alt=""><i></i></a>
                        <div>
                            <p>《Beautiful》 INTO1-米卡：因为人间有你回忆才精彩</p>
                            <p>启春音乐时间</p>
                        </div>
                        <a href="#">音乐推荐</a>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rl03.png" alt=""><i></i></a>
                        <div>
                            <p>滚石撞乐队 40团拼经典___马世芳专访果味VC</p>
                            <p>滚石撞乐队 40团拚经典-滚石40周年特别播客</p>
                        </div>
                        <a href="#">音乐推荐</a>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rl04.png" alt=""><i></i></a>
                        <div>
                            <p>关于加莱亚诺，你不能只知道《拉丁美洲被切开的血管》 | 滕威</p>
                            <p>硬核读书会FM</p>
                        </div>
                        <a href="#">音乐推荐</a>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rl05.jpg" alt=""><i></i></a>
                        <div>
                            <p>他被誉为中国的霍金，23岁在美国因病毒瘫痪，回国为中国科普60年</p>
                            <p>坚叔说传奇故事</p>
                        </div>
                        <a href="#">音乐推荐</a>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rl06.jpg" alt=""><i></i></a>
                        <div>
                            <p>S2 EP02 只要一起在台上社死过，我们就是一辈子的好朋友</p>
                            <p>仅供参考</p>
                        </div>
                        <a href="#">音乐推荐</a>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rl07.png" alt=""><i></i></a>
                        <div>
                            <p>Vol.003 从美妆、母婴到咖啡，DTC是「更贵」的商业模式吗？</p>
                            <p>DTC Lab</p>
                        </div>
                        <a href="#">音乐推荐</a>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rl08.png" alt=""><i></i></a>
                        <div>
                            <p>滚石撞乐队 40团拼经典___马世芳专访问题总部</p>
                            <p>滚石撞乐队 40团拚经典-滚石40周年特别播客</p>
                        </div>
                        <a href="#">音乐推荐</a>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rl09.png" alt=""><i></i></a>
                        <div>
                            <p>小城里的“复活宠物店”（上）</p>
                            <p>她的故事 Her Story</p>
                        </div>
                        <a href="#">音乐推荐</a>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rl10.png" alt=""><i></i></a>
                        <div>
                            <p>03 用文学的热泪清洗历史的冰冷｜莉迪亚·若热 x 吕婷婷</p>
                            <p>中欧国际文学节</p>
                        </div>
                        <a href="#">音乐推荐</a>
                    </li>

                </ul>
            </div>

            <div>
                <div class="radio-top">
                    <a href="#">节目排行榜</a>
                    <a href="#">更多&gt;</a>
                </div>
                <ul>

                    <li>
                        <a href="#"><img src="radio-imgs/rr01.jpg" alt=""><i></i></a>
                        <div style="width: 208px;">
                            <p>《鬼怪》——winter is coming</p>
                            <p>韩剧OST❤️</p>
                        </div>
                        <span>
                            <i style="width: 92%;"><i></i></i>
                        </span>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rr02.jpg" alt=""><i></i></a>
                        <div style="width: 208px;">
                            <p>顺其自然 (Been Through)</p>
                            <p>EXO</p>
                        </div>
                        <span>
                            <i style="width: 60%;"><i></i></i>
                        </span>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rr03.png" alt=""><i></i></a>
                        <div style="width: 208px;">
                            <p>你要结婚了纯享版</p>
                            <p>你要结婚了（纯享版）</p>
                        </div>
                        <span>
                            <i style="width: 80%;"><i></i></i>
                        </span>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rr04.png" alt=""><i></i></a>
                        <div style="width: 208px;">
                            <p>音药丨《碧涧流泉》百听不厌的古琴曲，洗涤心尘，解忧安神</p>
                            <p>古风纯音</p>
                        </div>
                        <span>
                            <i style="width: 70%;"><i></i></i>
                        </span>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rr05.jpg" alt=""><i></i></a>
                        <div style="width: 208px;">
                            <p>我承认都是月亮惹的祸</p>
                            <p>抖音2021热门Bgm</p>
                        </div>
                        <span>
                            <i style="width: 90%;"><i></i></i>
                        </span>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rr06.jpg" alt=""><i></i></a>
                        <div style="width: 208px;">
                            <p>喀秋莎</p>
                            <p>NO STEP BACK</p>
                        </div>
                        <span>
                            <i style="width: 65%;"><i></i></i>
                        </span>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rr07.png" alt=""><i></i></a>
                        <div style="width: 208px;">
                            <p>vol.44 2022绿茶测试排位赛：除旧迎新，驱除小人</p>
                            <p>安全出口FM</p>
                        </div>
                        <span>
                            <i style="width: 63%;"><i></i></i>
                        </span>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rr08.webp" alt=""><i></i></a>
                        <div style="width: 208px;">
                            <p>“富士山没留住欲落的樱花，白山茶终没抵过红玫瑰。”</p>
                            <p>解忧杂货店之小猪店</p>
                        </div>
                        <span>
                            <i style="width: 88%;"><i></i></i>
                        </span>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rr09.jpg" alt=""><i></i></a>
                        <div style="width: 208px;">
                            <p>我会在那腥臭腐朽的日子里熠熠生辉</p>
                            <p>怀念那个夏天</p>
                        </div>
                        <span>
                            <i style="width: 55%;"><i></i></i>
                        </span>
                    </li>

                    <li>
                        <a href="#"><img src="radio-imgs/rr10.png" alt=""><i></i></a>
                        <div style="width: 208px;">
                            <p>山楂树之恋</p>
                            <p>你的九儿W</p>
                        </div>
                        <span>
                            <i style="width: 23%;"><i></i></i>
                        </span>
                    </li>


                </ul>
            </div>

        </div>

        <div class="radb">

            <div class="radio-top">
                <a href="#">音乐推荐<i>·</i>电台</a>
                <a href="#">更多&gt;</a>
            </div>

            <ul>
                <li>
                    <a href="#"><img src="radio-imgs/mi1.png" alt=""></a>
                    <div>
                        <h3><a href="#">硬地电台</a></h3><br>
                        <p>硬地原创音乐榜·独家播客企划</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi2.png" alt=""></a>
                    <div>
                        <h3><a href="#">民谣之声～每天听的歌～</a></h3><br>
                        <p>【独家】DJ徐亮精选，陪你听听歌</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi3.jpg" alt=""></a>
                    <div>
                        <h3><a href="#">JUNGLE RADIO</a></h3><br>
                        <p>提供贴合当下情景与心境的MIX</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi4.jpg" alt=""></a>
                    <div>
                        <h3><a href="#">维维道来</a></h3><br>
                        <p>【独家】刘维首档音乐播客</p>
                    </div>
                </li>

            </ul>

        </div>

        <div class="radb">
            <div class="radio-top">
                <a href="#">生活<i>·</i>电台</a>
                <a href="#">更多&gt;</a>
            </div>

            <ul>
                <li>
                    <a href="#"><img src="radio-imgs/mi5.png" alt=""></a>
                    <div>
                        <h3><a href="#">童话冥想：御姐音 | 一听就困 不再失眠</a></h3><br>
                        <p>御姐音治愈你的失眠</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi6.png" alt=""></a>
                    <div>
                        <h3><a href="#">轻松频率:助眠氛围轻音</a></h3><br>
                        <p>氛围轻音&助眠&学习&解压</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi7.png" alt=""></a>
                    <div>
                        <h3><a href="#">正念冥想引导</a></h3><br>
                        <p>声音疗愈｜个人成长</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi8.png" alt=""></a>
                    <div>
                        <h3><a href="#">放松原创白噪音｜住在小森林</a></h3><br>
                        <p>在小森林里安然入睡</p>
                    </div>
                </li>

            </ul>

        </div>

        <div class="radb">
            <div class="radio-top">
                <a href="#">情感<i>·</i>电台</a>
                <a href="#">更多&gt;</a>
            </div>

            <ul>
                <li>
                    <a href="#"><img src="radio-imgs/mi9.png" alt=""></a>
                    <div>
                        <h3><a href="#">失眠城市——陪你一起等天明</a></h3><br>
                        <p>用温暖的声音治愈你</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi10.jpg" alt=""></a>
                    <div>
                        <h3><a href="#">平凡的时间里</a></h3><br>
                        <p>记录细碎过往和微小爱意</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi11.png" alt=""></a>
                    <div>
                        <h3><a href="#">人间太匆匆</a></h3><br>
                        <p>所有的感情都来自于偏爱</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi12.png" alt=""></a>
                    <div>
                        <h3><a href="#">温御之音|江奈儿陪你</a></h3><br>
                        <p>温暖你在每个难以入睡的夜晚</p>
                    </div>
                </li>

            </ul>

        </div>

        <div class="radb">
            <div class="radio-top">
                <a href="#">创作翻唱<i>·</i>电台</a>
                <a href="#">更多&gt;</a>
            </div>

            <ul>
                <li>
                    <a href="#"><img src="radio-imgs/mi13.jpg" alt=""></a>
                    <div>
                        <h3><a href="#">爱抽烟屁的彦祖</a></h3><br>
                        <p>让小哥哥的迷人低音炮治愈你</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi14.png" alt=""></a>
                    <div>
                        <h3><a href="#">顔人中的隔壁小窝</a></h3><br>
                        <p>住在你家隔壁，吵闹的唱歌男孩</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi15.png" alt=""></a>
                    <div>
                        <h3><a href="#">王巨星的电台</a></h3><br>
                        <p>你一定会爱上的惊艳男声翻唱</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi16.jpg" alt=""></a>
                    <div>
                        <h3><a href="#">网瘾少女叽</a></h3><br>
                        <p>元气少女唱好听的歌送给你</p>
                    </div>
                </li>

            </ul>
        </div>

        <div class="radb">
            <div class="radio-top">
                <a href="#">知识<i>·</i>电台</a>
                <a href="#">更多&gt;</a>
            </div>

            <ul>
                <li>
                    <a href="#"><img src="radio-imgs/mi17.png" alt=""></a>
                    <div>
                        <h3><a href="#">星辰计划</a></h3><br>
                        <p>仰望星空，探索未知世界</p>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="radio-imgs/mi18.png" alt=""></a>
                    <div>
                        <h3><a href="#">组织进化论</a></h3><br>
                        <p>“飞书”X声动活泼，每期访谈一位优秀管理者</p>
                    </div>
                </li>

                <li class="dropBot">
                    <a href="#"><img src="radio-imgs/mi19.png" alt=""></a>
                    <div>
                        <h3><a href="#">15赫兹｜听见打工人的声音</a></h3><br>
                        <p>专注于倾听职场人的声音</p>
                    </div>
                </li>

                <li class="dropBot">
                    <a href="#"><img src="radio-imgs/mi20.png" alt=""></a>
                    <div>
                        <h3><a href="#">睡眠先生的活力學</a></h3><br>
                        <p>心理学家蔡宇哲的睡眠知识分享</p>
                    </div>
                </li>

            </ul>
        </div>

    </div>
</div>


<script>
    var icon_eles = document.querySelectorAll('.radio-t>div>ul>li');
    for (i = 0; i < icon_eles.length; i++) {
        icon_eles[i].addEventListener('mouseenter', function () {
            this.children[0].children[1].style.display = 'block';
        });
        icon_eles[i].addEventListener('mouseleave', function () {
            this.children[0].children[1].style.display = 'none';
        });
    }
</script>